<template>
	<view class="evaluate">

		<view class="all-good">
			<view class="flex">

				<view>
					<image :src="imgRemote+info.goods_img" style="width: 200rpx;height: 200rpx;border-radius: 10rpx;">
					</image>
				</view>
				<view class="flex-full flex-column " style="margin-left: 30rpx;justify-content: space-between;">
					<view>
						<view>{{info.goods_name}}</view>
						<view class="gray_font" style="margin-top: 20rpx;">
							{{info.sku_guige}}
						</view>
					</view>

					<view class="flex-left-right">
						<text class="red_font">{{info.market_price}}</text>
						<text class="gray_font">x{{info.buy_num}}/{{info.unit}}</text>
					</view>
				</view>
			</view>

		</view>
		<view class="rank">
			<view class="flex-column star">
				<uni-rate v-model="value" @change="onChange" />
				<text class="fs-13 gray-font" style="margin-top:20rpx;">如果满意请给五星好评哦~</text>
			</view>
			<view class="text-info">
				<textarea v-model="think" placeholder="产品怎么样，快来发表你的看法~" />
				<view>

					<view class="flex " style="flex-wrap: wrap;">
						<view v-for="(item,index) in file" :key="index">
							<image :src="item" mode="aspectFill" class="file-camera">
							</image>
							<uni-icons type="clear" size="20" @click="file.splice(index,1)" class="delete-img" color="rgba(0,0,0,0.2)"></uni-icons>
							<!-- <text  ">x</text> -->
						</view>
						<view class="flex-column camera align_center" @click="open">
							<text class="iconfont iconpaizhao gray-font" style="font-size: 70rpx;"> </text>
							<text class="fs-13 gray-font">上传图片</text>
						</view>
					</view>
				</view>

			</view>
		</view>
		<view style="height:100rpx;"></view>
		<view class="fixed">
			<view class="c-button" @click="submit">提交</view>
		</view>
		<uni-popup ref="select" type="bottom">
			<my-sheetAction @success="getPath" @cancel="cancel"></my-sheetAction>
		</uni-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				showWay: false,
				value: 0,
				think: '',
				info: {},
				file: [],
				imgRemote: getApp().globalData.imgRemote,
				orderId: ''
			}
		},
		methods: {
			open() {
				this.$refs.select.open()
			},
			cancel() {
				this.$refs.select.close()
			},
			submit() {
				if(!this.value){
					return this.$Toast('请先评分');
				}
				if(!this.think){
					return this.$Toast('请填写评论');
				}
				let {
					info
				} = this;
				let params = {
					token: uni.getStorageSync('userToken'),
					order_id:info.order_id,
					level: this.value,
					content: this.think,
					img: this.file,
					goods_id:info.goods_id	
				}
				this.$post(this.$api.orderEvaluation, params, (res) => {
					let {
						data
					} = res;
					if (data.code == 1) {
						this.$Toast('评价成功');
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
						getApp().globalData.orderIndex = this.orderIndex;
					} else {
						this.$Toast(data.msg);
					}
				})
			},

			getPath(e) {
				this.file = this.file.concat(e);
			}
		},
		onLoad(e) {
			this.info = uni.getStorageSync('evaluateGood');
			this.orderId = e.id;
			this.orderIndex=e.index;

		}
	}
</script>

<style lang="scss" scoped>
	.evaluate {
		/deep/ .u-drawer-content {
			background: none;
		}

		.all-good,
		.rank {
			margin: 30rpx;
			background: white;
			padding: 0 30rpx 30rpx;
			border-radius: 10rpx;
		}

		.all-good>view {
			padding-top: 30rpx;
		}

		.star {
			height: 150rpx;
			justify-content: center;
			align-items: center;
		}

		.slot-btn {
			width: 170rpx;
			height: 170rpx;
			align-items: center;
			justify-content: center;
			border: 1px dashed #999;

			.iconfont {
				font-size: 70rpx;
			}
		}

		.text-info {
			background: #f8f8f8;
			border-radius: 10rpx;
			padding: 30rpx;

			textarea {
				height: 130rpx;
			}

			.delete-img {
				position: absolute;
				margin-left: -40rpx;
				margin-top: -13rpx;
				// background: rgba(0, 0, 0, 0.5);
				// width: 40rpx;
				// height: 40rpx;
				justify-content: center;
				font-size: 22rpx;
				color: white;
				border-radius: 50%;
				z-index: 9;

			}

			.file-camera {
				width: 170rpx;
				height: 170rpx;
				margin-right: 30rpx;
			}
		}

		.fixed {
			position: fixed;
			bottom: 0;
			width: 100%;
			background: white;
			padding: 10rpx 0;
		}

		.camera {
			width: 170rpx;
			height: 170rpx;
			border: 1px #eee dashed;
			justify-content: center;
		}
	}

	.c-button {
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
		border-radius: 39rpx;
		margin: 0 auto;
		background: $m-c;
		height: 78rpx;
		width: 690rpx;
		margin: 0 auto;
	}
</style>
